<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>9种CSS3 blend模式制作的鼠标滑过图片标题特效| </title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
<div class="container">
<div class="container">
<div class="elem first">
<img src="img/1.jpg" />
</div>
<div class="elem second">
<img src="img/2.jpg" />
<div class="partialBorder">
<div class="leftTop"></div>
<div class="rightTop"></div>
<div class="leftBot"></div>
<div class="rightBot"></div>
</div>
</div>
<div class="elem thrird">
<img src="img/3.jpg" />
<div class="line topToBot"></div>
<div class="line botToTop"></div>
</div>
<div class="elem fourth">
<img src="img/4.jpg" />
<div class="lineCont">
<div class="line top"></div>
<div class="line right"></div>
<div class="line bottom"></div>
<div class="line left"></div>
</div>
</div>
<div class="elem fifth">
<img src="img/5.jpg" />
<span class="left">Hover me!</span>
<span class="right">WoW WoW!!!</span>
</div>
<div class="elem sixth">
<img src="img/6.jpg" />
<div class="reveal">
<span>Revealing text!</span>
</div>
</div>
<div class="elem seventh">
<img src="img/7.jpg" />
<span class="bird">Very bird!</span>
</div>
<div class="elem eighth">
<img src="img/8.jpg" />
<div class="reveal">
<span>Vertically revealing!</span>
</div>
</div>
<div class="elem ninth">
<img src="img/9.jpg" />
<span class="umad">UMAD BRO?</span>
</div>
</div>
</div>
</body>
</html>